<template>
  <div>

    <div class="app-container">

      <TopInfo />

      <Search :lookup="data.lookup" @investigate="inves" />

      <el-button v-prmis="'machine_version_add'" type="primary" size="small" @click="add">
        <template #default>
          <span class="text-sm">{{ $t('machine.software.add') }}</span>
        </template>
      </el-button>
      <el-button type="primary" size="small" @click="getplan">
        <template #default>
          <span class="text-sm">{{ $t('machine.software.plan') }}</span>
        </template>
      </el-button>
    </div>


    <div class="app-container" v-loading="data.mtloading">
      <el-table :data="data.list" :header-cell-style="{ 'text-align': 'center' }" height="700"
        :cell-style="{ 'text-align': 'center' }" class="w-full">

        <el-table-column prop="mv_id" label="ID" sortable />

        <el-table-column prop="version_no" :label="$t('log.version')" sortable>
          <template #default="scope">
            {{ scope.row.version_no || '--' }}
          </template>
        </el-table-column>

        <el-table-column prop="size" :label="$t('machine.software.file')" sortable>
          <template #default="scope">
            {{ getPlevel.measure(scope.row.size, 1) }}
          </template>
        </el-table-column>

        <el-table-column prop="desc" :label="$t('machine.software.desc')" sortable>
          <template #default="scope">
            <el-icon :color="scope.row.desc ? '#409Eff' : ''" @click="onDesc(scope.row)">
              <Document />
            </el-icon>
          </template>
        </el-table-column>
        <el-table-column prop="update_time" :label="$t('date.modifyTime')" sortable>
          <template #default="scope">
            {{ getPlevel.gettime(scope.row.update_time, 3) }}
          </template>
        </el-table-column>
        <el-table-column prop="creator_nickname	" :label="$t('goods.ctrips.creatorName')" sortable>
          <template #default="scope">
            {{ scope.row.creator_nickname || '--' }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('public.operate')">
          <template #default="scope">
            <el-button v-prmis="'machine_version_update'" type="primary" size="small" @click="modify(scope.row)"
              :title="$t('machine.software.Modify')">{{ $t('public.edit') }}</el-button>
            <el-button v-prmis="'machine_version_del'" type="danger" size="small" @click="del(scope.row.mv_id)"
              :title="$t('machine.software.Delete')">{{ $t('public.del') }}</el-button>
          </template>
        </el-table-column>

      </el-table>

      <PageNum :total="data.total" :page="data.group" @exposeData="current" />

    </div>
    <el-dialog v-if="data.dialogVisible" v-model="data.dialogVisible" :width="'30%'" :style="'margin-top: 80px;'"
      :title="data.title" center>

      <softwareinfo v-if="data.type == 'softwareinfo'" :softwareinfo="data.obj" @onmacbtn="onmacbtn" />
      <updateplan v-if="data.type == 'updateplan'" :updateplan="data.list" @plan="plan" />

    </el-dialog>
    <!-- 详情 -->
    <el-dialog v-model="isDesc" :title="$t('public.details')" center width="600" destroy-on-close @close="isDesc = false" append-to-body>
      <p v-html="descData"></p>
    </el-dialog>
  </div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import softwareinfo from '../common/software_add.vue';
import updateplan from '@/views/machine/software/updateplan/addupdateplan.vue';
import getPlevel from '@/utils/level'

import {
  addsoftware,
  addupdateplan,
  delsoftware,
  getsoftwareList,
  updatesoftware
} from "@/api/machine_software";
import { useRouter } from "vue-router";
let isDesc = ref(false)
let descData = ref('')
const router = useRouter()
//跳转更新计划页面
let getplan = () => {
  router.push({ path: '/machine/software/updateplan/getupdateplan' })
}

let data = reactive({
  mtloading: false, // 加载
  dialogVisible: false, // 弹窗
  lookup: [ // 筛选栏
    { title: $t('log.version'), type: 'input', value: '', key: 'version_no' }
  ],
  title: '', // 弹窗标题
  type: '', // 弹窗类型
  list: [], // 列表信息
  obj: { // 添加/修改数据
    version_no: '',
    path: '',
    size: '',
    desc: '',
    mv_id: '',
    mvp_id: '',//更新计划ID
    status: '',
  },
  getplanlist: [],//查询设备软件更新计划列表



  group: { // 筛选数据
    version_no: '',
    page: 1,
    pageNum: 15
  },
  total: 0, // 总条数
})

let onDesc = (row) => {
  if (row.desc) {
    isDesc.value = true
    descData.value = row.desc
    descData.value = descData.value.replace(/\n/g, '<br>')
  }
}
// 获取列表信息
let getlist = () => {
  data.mtloading = true
  getsoftwareList(data.group).then(res => {


    data.mtloading = false
    if (res.state == 200) {
      data.list = res.data.data
      data.total = res.data.total
    }
  }).catch(err => {
    data.mtloading = false
  })
}
// 查询回调
let inves = (e) => {
  for (let key in e) {
    data.group[key] = e[key]
  }
  data.group.page = 1
  data.group.pageNum = 15
  getlist()
}

// 页数回调
let current = (e) => {
  data.group.page = e
  getlist()
}

// 添加设备软件
let add = () => {
  data.obj = {
    version_no: '',
    path: '',
    size: '',
    desc: '',
  }
  data.title = $t('machine.software.add')
  data.type = 'softwareinfo'
  data.dialogVisible = true
}
// 修改按钮
let modify = (e) => {
  data.title = $t('machine.software.modify')
  data.obj.mv_id = ''
  for (let key in data.obj) {
    data.obj[key] = e[key]
  }
  data.type = 'softwareinfo'
  data.dialogVisible = true
}

// 删除分组信息
let del = (e) => {
  ElMessageBox.confirm($t('message.deleteInfo'))
    .then(res => {
      delsoftware({ mv_id: e }).then(res => {
        if (res.state == 200) {
          ElMessage({
            message: $t('message.delSuccess'),
            type: 'success'
          })
          getlist()
          return
        }
        ElMessage({
          message: $t('message.networkFailed'),
          type: 'error'
        })
      })
    }).catch(err => {
      console.log('取消')
    })
}

// 添加修改分组
let onmacbtn = (e) => {
  if (e == false) {
    data.dialogVisible = false
    return
  }
  if (e.mv_id == undefined) {
    addsoftware(e).then(res => {
      if (res.state == 200) {
        ElMessage({
          message: $t('message.addSuccess'),
          type: 'success'
        })
        data.dialogVisible = false
        getlist()
        return
      }
      ElMessage({
        message: $t('message.networkFailed'),
        type: 'error'
      })
    })
  } else {
    updatesoftware(e).then(res => {
      if (res.state == 200) {
        ElMessage({
          message: $t('message.modifySuccess'),
          type: 'success'
        })
        data.dialogVisible = false
        getlist()
        return
      }
      ElMessage({
        message: $t('message.networkFailed'),
        type: 'error'
      })
    })
  }
}

let plan = (e) => {
  if (e == false) {
    data.dialogVisible = false
    return
  }
  addupdateplan(e).then(res => {
    if (res.state == 200) {
      ElMessage({
        message: $t('message.addSuccess'),
        type: 'success'
      })
      data.dialogVisible = false
      getlist()
      return
    }
    ElMessage({
      message: $t('message.networkFailed'),
      type: 'error'
    })
  })

}
getlist()
</script>
